﻿@page "/ai-chat"
@using Azure.AI.OpenAI
@using BootstrapBlazor.Server.OAuth;
@inherits BootstrapModuleComponentBase
@attribute [JSModuleAutoLoader("./AIChat/Chats.razor.js")]

<h3>@Localizer["ChatsTitle"]</h3>

<h4>@Localizer["ChatsDescription"]</h4>

<DemoBlock Title="@Localizer["ChatNormalTitle"]" Introduction="@Localizer["ChatNormalIntro"]" Name="Normal" ShowCode="false">
    <div class="chat-title">@Localizer["ChatUserTitle"]</div>
    <div class="chat-body">
        @if (Messages.Count == 0)
        {
            <div class="chat-welcome">
                <div class="chat-welcome-icon">
                    <i class="fa-solid fa-robot"></i>
                </div>
                <div class="chat-welcome-body">
                    <div class="chat-welcome-title">Start chatting</div>
                    <div class="chat-welcome-content">Test your assistant by sending queries below. Then adjust your assistant setup to improve the assistant's responses.</div>
                </div>
            </div>
        }
        @foreach (var message in Messages)
        {
            <div class="@GetStackClass(message.Role)" @key="message">
                <div class="msg-role">
                    @if (message.Role == ChatRole.User)
                    {
                        <img src="@AvatarUrl">
                    }
                    else
                    {
                        <i class="fa-solid fa-robot"></i>
                    }
                </div>
                <div class="msg-body">
                    <div class="msg-time">@message.Time.ToString("HH:mm:ss")</div>
                    <div>@message.Content</div>
                    @if (message.Role == ChatRole.Assistant)
                    {
                        <div class="msg-desc">AI-generated content may be incorrect</div>
                    }
                </div>
            </div>
        }
    </div>
    <div class="chat-footer">
        <CascadingAuthenticationState>
            <AuthorizeView>
                <Authorized>
                    <div class="chat-footer-title"><span>@DisplayName</span><a href="./Account/Logout" class="btn btn-primary"><i class="fa-solid fa-gear"></i><span>Localizer["ChatExit"]</span></a></div>
                    <div class="d-flex">
                        <Textarea Id="@Id" class="chat-footer-tx" rows="3" @bind-Value="@Context" PlaceHolder="Type user query here. (Shift + Enter for new line)" IsDisabled="!IsValid"></Textarea>
                        <div class="chat-buttons">
                            <Button Icon="fa-regular fa-paper-plane" Color="Color.Primary" OnClick="GetCompletionsAsync" IsAsync="true" class="btn-send" IsDisabled="!IsValid"></Button>
                            <Button Icon="fa-solid fa-xmark" Color="Color.Danger" OnClick="CreateNewTopic" class="btn-clear" IsDisabled="!IsValid"></Button>
                        </div>
                    </div>
                </Authorized>
                <NotAuthorized>
                    <div>@((MarkupString)Localizer["ChatDemoDesc"].Value)</div>
                    <div class="chat-auth">
                        <a href="./Account/Gitee" class="btn btn-primary">
                            <i class="fa-brands fa-google"></i>
                            <span>@Localizer["ChatGitee"]</span>
                        </a>
                        <a href="./Account/Github" class="btn btn-primary">
                            <i class="fa-brands fa-github"></i>
                            <span>@Localizer["ChatGithub"]</span>
                        </a>
                    </div>
                </NotAuthorized>
            </AuthorizeView>
        </CascadingAuthenticationState>
    </div>
</DemoBlock>
